<template>
  <div class="box">
    <header class="header">
      <ul>
        <li>左</li>
        <li>中</li>
        <router-link tag="li" to="/user" v-if="isLogin">我的</router-link>
        <router-link tag="li" to="/login" v-else>登录</router-link>
      </ul>
    </header>
    <div class="content" ref="content">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <!-- 轮播图 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item
        v-for="item of bannerList"
        :key="item.bannerid"
        >
          <van-image
            :src="item.img"
          />
        </van-swipe-item>
      </van-swipe>

      <!-- nav导航 -->
      <van-grid
        column-num="5"
        icon-size="44"
        :border="false"
      >
        <van-grid-item
          v-for="item of navList"
          :key="item.navid"
          :icon="item.imgurl"
          :text="item.title" />
      </van-grid>
      <!-- 产品列表 -->
      <van-list
      :immediate-check="false"
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      >
        <ProList :list = "proList"></ProList>
      </van-list>
      </van-pull-refresh>
    </div>
    <div class="backTop" v-if="flag" @click="backTop">
      <van-icon name="down" size="30"/>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import {
  Swipe,
  SwipeItem,
  Grid,
  GridItem,
  Image as VanImage,
  List,
  PullRefresh
} from 'vant'
import { getBannerList, getProList } from '@/api/home'
import ProList from '@/components/ProList'
import { mapState } from 'vuex'
Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(Grid)
Vue.use(GridItem)
Vue.use(VanImage)
Vue.use(List)
Vue.use(PullRefresh)
export default {
  computed: {
    // isLogin () {
    //   return this.$store.state.isLogin
    // }
    ...mapState({
      isLogin: ({ isLogin }) => isLogin
    })
  },
  components: {
    ProList
  },
  data () {
    return {
      flag: false,
      isLoading: false,
      loading: false,
      finished: false,
      count: 2, // 分页器
      bannerList: [],
      seckillList: [],
      proList: [],
      navList: [
        { navid: 1, title: '嗨购超市', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/125678/35/5947/4868/5efbf28cEbf04a25a/e2bcc411170524f0.png' },
        { navid: 2, title: '数码电器', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png!q70.jpg' },
        { navid: 3, title: '嗨购服饰', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/41867/2/15966/7116/60ec0e0dE9f50d596/758babcb4f911bf4.png!q70.jpg' },
        { navid: 4, title: '嗨购生鲜', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png!q70.jpg.dpg' },
        { navid: 5, title: '嗨购到家', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png!q70.jpg.dpg' },
        { navid: 6, title: '充值缴费', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/185733/21/13527/6648/60ec0f31E0fea3e0a/d86d463521140bb6.png!q70.jpg.dpg' },
        { navid: 7, title: '9.9元拼', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/36069/14/16068/6465/60ec0f67E155f9488/595ff3e606a53f02.png!q70.jpg.dpg' },
        { navid: 8, title: '领券', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/186080/16/13681/8175/60ec0fcdE032af6cf/c5acd2f8454c40e1.png!q70.jpg.dpg' },
        { navid: 9, title: '领金贴', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/196711/35/12751/6996/60ec1000E21b5bab4/38077313cb9eac4b.png!q70.jpg.dpg' },
        { navid: 10, title: 'plus会员', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/37709/6/15279/6118/60ec1046E4b5592c6/a7d6b66354efb141.png!q70.jpg.dpg' }
      ]
    }
  },
  async created () {
    const res = await getBannerList()
    this.bannerList = res.data.data

    const proRes = await getProList()
    this.proList = proRes.data.data
  },
  mounted () {
    // 给content添加滚动的事件
    this.$refs.content.addEventListener('scroll', () => {
      this.flag = this.$refs.content.scrollTop > 300
    })
  },
  beforeDestroy () {
    this.$refs.content.removeEventListener('scroll', () => {})
  },
  methods: {
    onLoad () {
      this.loading = true
      getProList({ count: this.count }).then(res => {
        this.loading = false
        if (res.data.data.length === 0) {
          this.finished = true
        } else {
          console.log('11', res.data)
          this.proList = [...this.proList, ...res.data.data]
          this.count++
        }
      })
    },
    onRefresh () {
      this.isLoading = true
      getProList().then(res => {
        this.isLoading = false
        this.proList = res.data.data
        this.finished = false
        this.count = 2
      })
    },
    backTop () {
      this.$refs.content.scrollTop = 0
    }
  }
}
</script>

<style lang="stylus" scoped>
.backTop
  position fixed
  bottom 110px
  right 10px
  width 36px
  height 36px
  border 1px solid #efefef
  background-color #efefef
  border-radius 50%
  transform rotate(180deg)
  display flex
  justify-content center
  align-items center
  color #666
.header
  ul
    display flex
    height 100%
    li
      height 100%
      width 50px
      display flex
      justify-content center
      align-items center
      color #fff
      &:nth-child(2)
        flex 1
</style>
